<template>
  <div>
    <Modal v-model="modal.show"  :loading="modal.loading" :title="modal.title"  :mask-closable="false" :footer-hide=true width="800px" :closable="false">
      <Form ref="formGbServer" :model="rowData" label-position="right" :label-width="100" >
        <FormItem :label="$t('group_name')" >
          <Input :placeholder="$t('group_name')" v-model="rowData.groupName" class="half-input" :readonly="modal.readonly"/>
        </FormItem>
        <FormItem :label="$t('group_contact')" >
          <Input :placeholder="$t('group_contact')" v-model="rowData.contactName" class="half-input" :readonly="modal.readonly"/>
        </FormItem>
        <FormItem :label="$t('group_contact_phone')" >
          <Input :placeholder="$t('group_contact_phone')" v-model="rowData.contactPhone" class="half-input" :readonly="modal.readonly"/>
        </FormItem>
        <FormItem>
          <div style="float: right;">
            <Button v-show="modal.action!='VIEW'" type="primary"  @click="save">{{$t('save')}}</Button>
            <Button @click="close">{{$t('cancel')}}</Button>
          </div>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import Zzd from "@/api/Zzd"
import {apiResult} from "@/libs/util";
export default {
  data(){
    return{
      api: new Zzd(),
      modal:{
        show:false,
        loading:false,
        title:this.$t('group_info'),
        readonly:false,
        action:null
      },
      rowData:{
        groupName:null,
        contactName:null,
        contactPhone:null,
        id:null,
      },
      callback:null
    }
  },
  methods:{
    openDialog: function (action,row, callback) {
      this.callback = callback;
      this.modal.show = true;
      this.modal.action = action;
      if (!!row){this.rowData = row}
      if (action==="ADD"){
        this.modal.title = this.$t('new_group');
        this.modal.readonly = false;
      }
    },
    /**
     * 新增保存
     */
    save:function(){ //如果这个用 ()=>{} 那么this 都不是undifine,?????????
      if (!this.rowData.groupName){
        this.$Message.error(this.$t('group_name_cannot_empty'));
        return;
      }
      this.api.newGroup(JSON.stringify(this.rowData)).then(res=>{
          apiResult(res.data,true,result=>{
            if (!!this.callback){
              this.callback(res.data);
            }
            this.modal.show = false;
          })
      })
    },
    close: function(){
      this.modal.show = false;
    },
  }
}
</script>
